<template>
    <div>
        <div class="message-box">
        <!-- 头部 -->
        <div class="massage-header">
            <span class=" icon iconfont icon-arrow-left-bold" @click="$router.go(-1)"></span>
            <span>我的资料</span>
        </div>
        <!-- 分割线 -->
        <div class="line"></div>
        <!-- 内容 -->
        <div class="content-box">
            <div class="header-img">
                <span class='words'>头像</span>
                <span class="img"><img :src="lists.avatarUrl" alt=""></span>
            </div>
            <div class="nickname">
                <span class='words'>昵称</span>
                <span class="content">{{lists.nickname}}</span>
            </div>
            <div class="sex">
                <span class='words'>性别</span>
                <span class="content">{{lists.gender | sex}}</span>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="line"></div>
        <div class="information-box">
            <div class="item">
                <span class='words'>生日</span>
                <span class="content">{{lists.birthday | date}}</span>
            </div>
            <div class="item">
                <span class='words'>地区</span>
                <span class="content">{{lists.province}}-{{lists.city}}</span>
            </div>
            <div class="item">
                <span class='words'>大学</span>
                <span class="content">广东培正</span>
            </div>
            <div class="item">
                <span class='words'>简介</span>
                <span class="content">{{lists.signature}}</span>
            </div>
            <!-- 分割线 -->
            <div class="line"></div>
            <div class="item">
                <span class='words'>注册时间</span>
                <span class="content">{{lists.createTime | date}}</span>
            </div>
        </div>

            <!-- 按钮 -->
            <div class="btns">
                <button class="btn" v-if="flag">修改</button>
                <button class="btn" v-if="!flag">提交</button>
            </div>
        </div>
    </div>
</template>

<script>
    import {getUserDetail} from '../../api/my'
    export default {
        data() {
            return {
                flag:true,//切换修改与提交
                lists:[],
            }
        },
        created() {
            let id = window.localStorage.getItem('uid')
            getUserDetail({uid:id}).then(data=>{
                if(data.code == 200){
                    console.log(data.profile);
                    this.lists = data.profile;
                }
            })
        },
        filters:{
            sex(value){
                if(value == 1){
                    return '男'
                }else{
                    return '女'
                }
            },
            date(value){
                let date = new Date(value)
                let year = date.getFullYear()
                let month = (date.getMonth()+1)>10?date.getMonth()+1:'0'+(date.getMonth()+1)
                let nowdate = date.getDate()>10?date.getDate():'0'+date.getDate()
                return year+'-'+month+'-'+nowdate
            }
        }
    }
</script>

<style lang="less">
.line{
    height: 6px;
    width: 100%;
    background-color: #f5f5f5;
}
.public-content{
    width: 96%;
    margin-left: 4%;
    height: 45px;
    line-height: 45px;
    display: flex;
    justify-content:space-between;
    border-bottom: 1px solid #e9e8e8;
    color: #181818;
    .words{
        font-size: 15px;
    }
    .content{
        font-size: 12px;
        color: #7c7c7c;
        margin-right: 16px;
    }
}
.message-box{
    min-width: 320px;
    max-width: 750px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    z-index: 1505;
    .massage-header{
        font-size: 16px;
        color: #181818;
        padding: 15px 0 ;
        .icon{
            display: inline-block;
            width: 40px;
            height: 100%;
            text-align: center;
        }
        
    }
    .content-box{
        width: 100%;
        div:nth-last-child(1){
            border: none ;
        }
        .header-img{
            width: 96%;
            margin-left: 4%;
            padding: 8px 0;
            display: flex;
            justify-content:space-between;
            border-bottom: 1px solid #e9e8e8;
            .img{
                display: block;
                position: relative;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 16px;
                background-color: #e7021e;
                overflow: hidden;
                img{
                    position: absolute;
                    width: 100%;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    margin: auto;
                }
            }
            .words{
                color: #181818;
                font-size: 15px;
                height: 30px;
                line-height: 30px;
            }
        }
        .nickname{
            .public-content;
        }
        .sex{
            .public-content;
        }
    }
    .information-box{
        width: 100%;
        div:nth-last-child(1){
            border: none ;
        }
        .item{
            .public-content;
        }
    }
    .btns{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        margin-top: 100px;
    }
    .btn{
        width: 40%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border-radius: 30px;
        background-color: rgb(61, 169, 211);
        color: white;
    }
}
</style>